<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到答个爽</title>
    <link rel="icon" href="../img/dgs.jpg" type="image/jpg" >
    <link rel="stylesheet" href="../layui/css/layui.css">



    <style type="text/css">

        body a{
            cursor:pointer
        }

        body i{
            cursor: pointer
        }

        button{
            outline: none;
            border: none;
        }


        div::-webkit-scrollbar{
            width:10px;
        }
        div::-webkit-scrollbar-track{
            background: rgba(255, 255, 255, 0.4);
            border-radius:4px;
        }
        div::-webkit-scrollbar-thumb{
            background: #e77878;
            border-radius:30px;
        }
        div::-webkit-scrollbar-thumb:hover{
            background: #e34646;
        }


        #Notice{
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 10;
        }
        #NoticeDv{
            position: absolute;
            left: 50%;
            margin-left: -315px;
            padding: 10px;
            width: 590px;
            height: 800px;
        }
        #NoticeDv b{
            cursor: pointer
        }

        #Notice1{
            width: 400px;
            height: 250px;
            margin: 10px 0 0 170px;
            overflow:auto
        }

        #Notice2{
            text-align: center;
            color: black;
            background: white;
            padding: 10px;
            border-radius: 30px;
            width: 400px;
            height: 200px;
            margin: -50px 0 0 160px;
            overflow:auto
        }


        #leftButton{
            margin-left: -60px;
            margin-top: -20px;
            width: 60px;
            height:60px;
            border: 3px solid black;
            border-radius: 100%;
            cursor: pointer;
        }

        #rightButton{
            margin-left: 650px;
            margin-top: -83px;
            width: 60px;
            height:60px;
            border: 3px solid black;
            border-radius: 100%;
            cursor: pointer;
        }

        #rightButton:hover{
            background-color: #b6bbc1
        }

        #leftButton:hover{
            background-color: #b6bbc1
        }

        .NoticePicture{
            margin: 10px 0 10px 10px;
            max-width: 380px;
        }

        #storeContent{
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 11;
        }

        #storeContentDv{
            background-color: white;
            margin-top: 50px;
            position: absolute;
            left: 50%;
            margin-left: -420px;
            padding: 10px;
            border: 2px solid black;
            border-radius: 20px;
            width: 800px;
            height: 600px;
        }

        #storageBox{
            border: 2px solid black;
            padding-left: 20px;
            border-radius: 20px;
            margin-top: 30px;
            padding-top: 10px;
            margin-left: 10px;
            width: 550px;
            height: 500px;
            overflow: auto;
        }

        #menu{
            float: right;
            margin-top: 10px;
            width: 520px;
            height: 100px;
        }

        #menu span{
            cursor: pointer
        }

        #SignInDv{
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 12;
        }

        #SignInSonDv{
            margin-top: 200px;
            background-color: #dbbc6a;
            position: absolute;
            left: 50%;
            margin-left: -160px;
            padding: 10px;
            border-radius: 20px;
            width: 300px;
            height: 300px;
        }

        .SignIn{
            width: 150px;
            height: 60px;
            padding-top: 10px;
            margin-left: 75px;
            margin-top: 20px;
            text-align: center;
            background-color: white;
            border-radius: 40px;
            cursor: pointer;
        }

        .SignIn:hover{
            background-color: #e6e6e6
        }

        #knapsack{
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 13;
        }

        #knapsackDv{
            margin-top: 50px;
            position: absolute;
            left: 50%;
            margin-left: -295px;
            padding: 10px;
            border: 5px solid black;
            border-radius: 20px;
            width: 590px;
            height: 600px;
        }

        #knapsack b{
            cursor: pointer
        }

        #knapsackTop{
            width: 590px;
            height: 40px;
        }

        .lattice{
            cursor: pointer;
            float: left;
            margin: 10px 10px 10px 10px;
            width: 60px;
            height: 60px;
            border: 2px solid orange;
        }

        #verifyUserLayer{
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 15;
        }

        #verifyUserDv{
            left: 50%;
            margin-left: -200px;
            margin-top: 200px;
            position: absolute;
            width: 400px;
            height: 400px;
            background: white;
        }

        #yzmBtn{
            float: left;
            width: 90px;
            height: 25px;
            padding-top: 5px;
            border-radius: 5px;
            background: #1E9FFF;
            margin: -35px 0 0 225px;
            text-align: center;
            cursor: pointer;
            z-index: 1000;
        }

        #verifySubmit{
            float: left;
            width: 100px;
            height: 35px;
            background: rgba(255, 30, 30, 0.8);
            margin: 40px 0 0 75px;
            text-align: center;
            font-size: 15px;
            color: white;
            cursor: pointer;
        }

        #verifyClose{
            float: left;
            width: 100px;
            height: 27px;
            padding-top: 8px;
            background: rgba(217, 217, 217, 0.8);
            margin: 40px 0 0 50px;
            text-align: center;
            font-size: 15px;
            cursor: pointer;
        }

        #exchangeLayer{
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 16;
        }

        #exchangeDv{
            left: 50%;
            margin-left: -200px;
            margin-top: 200px;
            position: absolute;
            width: 400px;
            height: 220px;
            background: white;
            border-radius: 30px;
        }

        #exchangeTitle{
            width: 400px;
            height:30px;
            text-align: center;
            margin-top: 20px;
        }

        #exchangeWindow{
            margin: 30px auto 0;
            width: 400px;
            height: 30px;
        }

        #exchangeNumberImage{
            margin-left: 45px;
            margin-top: -5px;
            float: left;
            width: 50px;
            height: 30px;
            border-radius: 10px;
        }

        #exchangeNumberDv{
            float: left;
            width: 200px;
            height: 30px;
            border: 2px solid #b63737;
            border-radius: 10px;
        }

        #exchangeType{
            margin-top: 5px;
            margin-left: 10px;
            float: left;
            width: 50px;
            height: 30px;
            border-radius: 10px;
            font-size: 25px;
        }

        #exchangeBtn{
            margin: 20px auto 0;
            width: 125px;
            height: 35px;
            background: #7deeff;
            border-radius: 10px;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
        }

        #exchangeTips{
            margin: 20px auto 0;
            width: 200px;
            height: 20px;
            text-align: center;
            font-size: 10px;
        }

        #content{
            background: rgba(150, 150, 150, 0.5);
            width: 1400px;
            height: 800px;
            border-radius: 15px;
            margin: 80px auto;
            position: relative;
        }

        .dropdown-content {
            z-index: 20;
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            width: 100px;
            box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 15px 10px;
            text-decoration: none;
            text-align: center;
            display: block;
        }

        .xx a:hover {
            background-color: #f1f1f1
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .head-img:active .xx{
            display: block;
        }

        #GoldCoinDv{
            padding-top: 5px;
            width: 250px;
            height: 50px;
            margin-top: -60px;
            margin-left: 160px;
            position: absolute;
        }

        #jin{
            border-radius: 20px;
            margin-top: 5px;
            float: left;
            width: 120px;
            height: 30px;
            border: 3px solid #f6df61;
            text-align: center;
        }

        #Diamonds{
            float: left;
            padding-top: 5px;
            width: 250px;
            height: 50px;
            margin-left: 450px;
            margin-top: -60px;
            position: absolute;
        }

        #DiamondNumberDv{
            border-radius: 20px;
            margin-top: 5px;
            float: left;
            width: 120px;
            height: 30px;
            border: 3px solid #b6d7e2;
            text-align: center;
        }
        .addNumber{
            left: 185px;
            top: 13px;
            position: absolute;
        }


        #pattern1{
            width: 500px;
            height: 550px;
            position: relative;
        }

        #pattern2{
            width: 500px;
            height: 550px;
            position: relative;
        }

        .pattern{
            font-size: 2em;
            width: 500px;
            height: 100px;
            color: white;
            cursor: pointer;
            text-align: center;
        }
        .btnText{
            height: 40px;
            padding-top: 30px;
        }

        .tp{
            min-width: 60px;
            max-width: 60px;
            min-height: 60px;
            max-height: 60px
        }

        .crossSign{
            text-align: center;
            width: 35px;
            height: 35px;
            border: 2px solid white;
            background-color: white;
            border-radius: 100%;
            float: right;
            margin-top: 5px;
            padding-top: 2px;
        }

        .CrossSignIn{
            text-align: center;
            width: 35px;
            height: 35px;
            border-radius: 100%;
            float: right;
            background-color: white;
            margin-top: 5px;
            padding-top: 2px;
            cursor: pointer;
        }





        .in {
            -webkit-animation-timing-function: ease-out;
            -webkit-animation-duration: 350ms;
            animation-timing-function: ease-out;
            animation-duration: 350ms;
        }
        .out {
            -webkit-animation-timing-function: ease-in;
            -webkit-animation-duration: 225ms;
            animation-timing-function: ease-in;
            animation-duration: 225ms;
        }
        .viewport-flip {
            -webkit-perspective:1000px;
            perspective:1000px;
            position: absolute;
        }
        .flip {
            -webkit-backface-visibility: hidden;
            -webkit-transform: translateX(0);
            backface-visibility: hidden;
            transform: translateX(0);
        }
        .flip.out {
            -webkit-transform: rotateY(-90deg) scale(0);
            -webkit-animation-name: RotateLeft;
            -webkit-animation-duration: 175ms;
            transform: rotateY(-90deg) scale(0);
            animation-name: RotateLeft;
            animation-duration: 175ms;
        }
        .flip.in {
            -webkit-animation-name: RotateRight;
            -webkit-animation-duration: 225ms;
            animation-name: RotateRight;
            animation-duration: 225ms;
        }
        @-webkit-keyframes RotateLeft {
            from { -webkit-transform: rotateY(0); }
            to { -webkit-transform: rotateY(-90deg) scale(.9); }
        }
        @keyframes RotateLeft {
            from { transform: rotateY(0); }
            to { transform: rotateY(-90deg) scale(.9); }
        }
        @-webkit-keyframes RotateRight {
            from { -webkit-transform: rotateY(90deg) scale(.9); }
            to { -webkit-transform: rotateY(0); }
        }
        @keyframes RotateRight {
            from { transform: rotateY(90deg) scale(.9); }
            to { transform: rotateY(0); }
        }
        .list {
            position: absolute;
        }
        .TheUseless{
            visibility: hidden;
        }

        #userImage{
            position: relative;
            z-index: 2;
            width: 80px;
            height: 80px;
        }
        .userPhoto{
            margin-top: 20px;
            margin-left: 40px;
            border-radius: 100%;
            width: 80px;
            height: 80px;
            cursor: pointer;

        }
        #myselfInformation{
            background-color: white;
            position: absolute;
            margin-left: -70px;
            float: left;
            width: 300px;
            height: 500px;
            z-index: -1;
            opacity: 0;
            box-shadow: 2px 2px 5px #888888;
        }

        #Information1{
            margin: 70px 0 0 90px;
            width: 120px;
            height: 50px;
            text-align: center;
            font-size: 2.5em;
        }
        #Information2{
            margin: 20px 0 0 15px;
            width: 270px;
            height: 80px;
        }
        .pvpData{
            width: 90px;
            height: 80px;
            float: left;
            text-align: center;
            font-size: 1.5em;
        }
        #Information3{
            margin-left: 25px;
            width: 250px;
            height: 280px;
        }
        .UserOption{
            width: 250px;
            height: 40px;
            text-align: left;
            font-size: 1.5em;
            margin-bottom: 15px;
            border-bottom: 1px solid orange;
        }




        #PayBigDv{
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 14;
        }

        #payDv{
            position: relative;
            width: 800px;
            height: 550px;
            border-radius: 40px;
            background-color: white;
            margin: 150px auto 0;
        }

        .paySize{
            width: 200px;
            height: 200px;
            border: 2px solid #16c9c9;
            border-radius: 100%;
            float: left;
            margin: 35px 5px 0 45px;
            cursor: pointer;
            text-align: center;
            font-size: 2em;
            color: black;
        }

        #nextPayDv{
            float: left;
            width: 150px;
            height: 40px;
            margin: 20px 0 0 225px;
        }
        #ClosePayDv{
            float: left;
            width: 150px;
            height: 40px;
            margin: 20px 0 0 50px;
        }

        #nextPay{
            width: 150px;
            height: 40px;
            background-color: #4ab9e6;
            font-size: 1.5em;
            color: white;
            cursor: pointer;
        }
        #ClosePay{
            width: 150px;
            height: 40px;
            font-size: 1.5em;
            color: black;
            cursor: pointer;
        }

        #nextPay:hover{
            background-color: #7ac8e7;
        }

        #choicePayWayDv{
            position: absolute;
            width: 500px;
            height: 400px;
            top: 20px;
        }

        #PayTitleDv{
            color: #009f95;
            width: 500px;
            height: 70px;
            margin: 0 auto;
            text-align:center;
            font-size: 2.7em;
            font-style: italic
        }

        #PayMoneyDv{
            width: 500px;
            height: 50px;
            margin: 50px auto 0;
            text-align:center;
        }

        .payImageDv{
            float: left;
            margin: 60px 30px 0 55px;
        }

        .payImage{
            width: 75px;
            height: 75px;
            cursor: pointer;
        }








        body{
            position: relative;
            background-image: url("../img/index2.jpg");
            background-size:cover;
        }

        #knapsackDv{
            background: url("../img/bag.jpg");
            background-size:cover;
        }

        .part1{
            background-image: url("../img/indexRedBtn.png");
            background-size:cover;
        }

        .part2{
            background-image: url("../img/indexGreenBtn.png");
            background-size:cover;
        }

        #NoticeDv{
            background: url("../img/Book.png");
            background-size:cover;
        }

        #morePlay{
            background: url("../img/indexGreenBtn.png");
            background-size:cover;
        }
        #returnPattern{
            background: url("../img/indexRedBtn.png");
            background-size:cover;
        }
    </style>

</head>

<body>
<div id="Notice">
    <div id="NoticeDv">
        <div id="NoticeTitleDv" style="margin-left: 120px;margin-top: 40px;width: 450px;height: 50px;text-align: center">
            <b id="NoticeTitle" style="font-size: 30px"></b>
        </div>
        <div id="closeNotice" class="crossSign" style="margin-top: -50px;margin-left: -10px">
            <b class="layui-icon layui-icon-close" style="font-size: 30px; color: #fd4449;"></b>
        </div>
        <div id="Notice1"><img id="NoticePicture" src="" alt="" class="NoticePicture"></div>
        <div id="leftButton">
            <i class="layui-icon layui-icon-left" style="position: absolute;font-size:50px;"></i>
        </div>
        <div id="rightButton">
            <i class="layui-icon layui-icon-right" style="margin-left: 7px;position: absolute;font-size:50px;"></i>
        </div>
        <div id="Notice2">
            <span id="NoticeWords" style="font-size:20px"></span>
        </div>
    </div>
</div>

<div id="storeContent">
    <div id="storeContentDv">
        <div id="closeStore" class="crossSign" style="cursor: pointer;border: 1px solid #fd4449;margin-top: -10px;margin-right: -10px">
            <b class="layui-icon layui-icon-close" style="font-size: 30px; color: #fd4449;"></b>
        </div>
        <div id="box" style="width: 750px;height: 560px;margin-left: 25px;margin-top: 10px;">


        </div>
        <div style="display: flex; margin:10px auto; text-align: center;">
            <div style="flex: 1">
                <div class="pageNav">
			                 <span class="layui-breadcrumb" lay-separator="-">
			                   <a class="fristPage">首页</a>
			                   <a class="lastPage">上一页</a>
			                   <a><cite>第<span id="page"></span>页</cite></a>
			                   <a class="nextPage">下一页</a>
			                   <a class="endPage">尾页</a>
			                 </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="SignInDv">
    <div id="SignInSonDv">
        <div id="closeSignIn" class="CrossSignIn" >
            <b class="layui-icon layui-icon-close" style="font-size: 30px; color:#009afc"></b>
        </div>
        <div style="width: 200px;height: 80px;margin-left: 50px;margin-top: 20px;text-align: center;color: white">
            <span style="font-size: 30px">已打卡</span><span id="signDays" style="font-size: 50px"></span><span style="font-size: 20px">天</span>
        </div>
        <div id="SignIn" class="SignIn">
            <b id="SignInOrNot" style="font-size: 2.5em"></b>
        </div>

        <div style="width: 200px;height: 30px;margin-left: 50px;margin-top: 60px;text-align: center;color: white">
            <span style="font-size: 15px">连续打卡金币奖励更高</span>
        </div>
    </div>
</div>

<div id="knapsack">
    <div id="knapsackDv">
        <div id="knapsackTop">
            <div style=";margin: 0 auto;text-align: center;width: 200px">
                <span id="knapsackName" style="font-size: 30px;color: #c15e4a"></span>
            </div>
            <div id="closeKnapsack" class="crossSign" style="margin-top: -40px">
                <b class="layui-icon layui-icon-close" style="font-size: 30px; color: #fd4449;"></b>
            </div>
            <div style="width: 100px;float: right;text-align: center"><b>已使用格数：</b><b id="UsedLattice"></b><b>总共格数：</b><b id="unusedLattice"></b></div>
            <div id="storageBox"></div>
        </div>
    </div>
</div>

<div id="PayBigDv">
    <div id="payDv">
        <div id="paySizeDv" style="width: 800px;height: 450px;">
            <div class="paySize" value="6"><img src="../img/6yuan.png" alt="" style="width: 90px;margin-top: 60px">
                <p>￥6元</p>
            </div>
            <div class="paySize" value="30"><img src="../img/30yuan.png" alt="" style="width: 150px;margin-top: 40px">
                <p>￥30元</p>
            </div>
            <div class="paySize" value="68"><img src="../img/68yuan.png" alt="" style="width: 100px;margin-top: 40px">
                <p>￥68元</p>
            </div>
            <div class="paySize" value="128"><img src="../img/128yuan.png" alt="" style="width: 120px;margin-top: 40px">
                <p>￥128元</p>
            </div>
            <div class="paySize" value="328"><img src="../img/328yuan.png" alt="" style="width: 100px;margin-top: 40px">
                <p>￥328元</p>
            </div>
            <div class="paySize" value="648"><img src="../img/648yuan.png" alt="" style="width: 120px;margin-top: 50px">
                <p>￥648元</p>
            </div>
        </div>
        <div id="nextPayDv">
            <button id="nextPay" onclick="nextPay()">下一步</button>
        </div>
        <div id="ClosePayDv">
            <button id="ClosePay" onclick="ClosePay()">取消</button>
        </div>

    </div>
</div>

<div id="verifyUserLayer">

</div>

<div id="exchangeLayer">
    <div id="exchangeDv">
        <div id="exchangeClose" style="float: left;position:absolute;color: black;margin:10px 0 0 20px">
            <i id="i" class="layui-icon layui-icon-return" style="font-size: 3em"></i>
        </div>
        <div id="exchangeTitle">
            <b style="font-size: 25px">钻石兑换金币</b>
        </div>
        <div id="exchangeWindow">
            <div id="exchangeNumberImage">
                <img src="../img/jinbi.png" alt="" width="40px">
            </div>
            <div id="exchangeNumberDv">
                <input id="exchangeNumber" type="text" style="width: 200px;height: 30px" lay-verify="title" autocomplete="off" placeholder="请输入要兑换的金币数量" class="layui-input">
            </div>
            <div id="exchangeType">×100</div>
        </div>
        <div id="exchangeBtn">确&nbsp;认&nbsp;兑&nbsp;换</div>
        <div id="exchangeTips">每兑换100个金币消耗1钻石</div>
    </div>
</div>

<div  id="content">
    <div id="menu">
        <div id="NoticeButton" style="width: 100px;height: 100px;margin-right: 10px;padding-top: 15px;text-align: center;float: left;cursor: pointer">
            <img style="width: 100px" src="../img/BookOpen.png">
            <p style="font-size: 1.5em;color:white ;">公告</p>

        </div>
        <div id="storeButton" style="width: 100px;height: 100px;text-align: center;float: left;cursor: pointer">
            <img style="width: 70px" src="../img/Shop.png">
            <p style="font-size: 1.5em;color:white ;">商城</p>
        </div>
        <div id="SignInButton" style="width: 100px;height: 100px;padding-top: 1px;text-align: center;float: left;cursor: pointer">
            <img style="width: 60px" src="../img/Clock.png">
            <p style="font-size: 1.5em;color:white ;">打卡</p>
        </div>
        <div id="knapsackButton" style="width: 100px;height: 100px;text-align: center;float: left;cursor: pointer">
            <img style="width: 70px" src="../img/Brown.png">
            <p style="font-size: 1.5em;color:white ;">仓库</p>
        </div>
        <div class="dropdown" style="width: 100px;height: 100px;padding-top: 2px;text-align: center;float: left;cursor: pointer">
            <img style="width: 70px" src="../img/Settings.png">
            <p style="font-size: 1.5em;color:white ;">菜单</p>
            <div class="dropdown-content">
                <a href="#" style="margin-top: 10px">联系客服</a>
                <a href="../img/帮帮我们.jpg">请帮帮我们</a>
                <a href="#">关于答个爽</a>
                <a id="ToMyself">个人中心</a>
            </div>
        </div>
    </div>

    <div id="userImage">
        <img src="" alt="" id="userPhoto" class="userPhoto informationShow">
    </div>
    <div id="myselfInformation" class="informationShow">
        <div id="Information1">
            <span id="username"></span>
        </div>
        <div id="Information2">
            <div id="winDv" class="pvpData">
                <span style="color: #00bf0f">胜场</span>
                <p id="win"></p>
            </div>
            <div id="VictoryDv" class="pvpData">
                <span>胜率</span>
                <p id="victory"></p>
            </div>
            <div id="loseDv" class="pvpData">
                <span style="color: #e02b2b">败场</span>
                <p id="lose"></p>
            </div>
        </div>
        <div id="Information3">
            <div class="UserOption"><a id="userDataUrl">个&nbsp;&nbsp;人&nbsp;&nbsp;数&nbsp;&nbsp;据</a></div>
            <div class="UserOption"><a id="userRecordsUrl">消&nbsp;&nbsp;费&nbsp;&nbsp;记&nbsp;&nbsp;录</a></div>
            <div class="UserOption"><a id="battleRecordUrl">对&nbsp;&nbsp;战&nbsp;&nbsp;记&nbsp;&nbsp;录</a></div>
            <div class="UserOption"><a id="userInformationUrl">个&nbsp;&nbsp;人&nbsp;&nbsp;信&nbsp;&nbsp;息</a></div>
            <div class="UserOption"><a id="cancellation">登&nbsp;&nbsp;出</a></div>
        </div>
    </div>

    <div id="GoldCoinDv">
        <div style="float: left">
            <img style="width: 50px;" src="../img/jinbi.png">
        </div>
        <div id="jin">
            <b id="GoldCoinNumber" style="font-size: 1.7em;color: #fda157"></b>
        </div>
        <div id="addGoldCoin"  class="addNumber">
            <img src="../img/addGSign.png" style="width: 30px;height: 30px;cursor: pointer">
        </div>
    </div>
    <div id="Diamonds">
        <div style="float: left">
            <img style="width: 50px;" src="../img/zuan.png">
        </div>
        <div id="DiamondNumberDv">
            <b id="DiamondNumber" style="font-size: 1.7em;color: #34e5c8"></b>
        </div>
        <div id="addDiamond" class="addNumber">
            <img src="../img/addDSign.png" style="width: 30px;height: 30px;cursor: pointer">
        </div>

    </div>

    <div id="choicePattern" style="margin-left: 450px;margin-top: 130px" class="viewport-flip">
        <a href="#" class="list flip">
            <div id="pattern1" >
                <div id="btn1">
                    <div id="breakThrough" class="pattern part1">
                        <div class="btnText">
                            <span>闯关模式</span>
                        </div>
                    </div>
                </div>
                <div id="btn2" style="margin-top: 30px">
                    <div id="pk" class="pattern part1">
                        <div class="btnText">
                            <span>PK模式</span>
                        </div>
                    </div>
                </div>
                <div id="btn3" style="margin-top: 30px">
                    <div id="endless" class="pattern part1">
                        <div class="btnText">
                            <span>无尽模式</span>
                        </div>
                    </div>
                </div>
                <div id="btn4" style="margin-top: 30px">
                    <div id="morePlay" class="pattern">
                        <div class="btnText">
                            <span>更多玩法</span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="list flip TheUseless">
            <div id="pattern2">
                <div id="btn5">
                    <div id="meiri" class="pattern part2">
                        <div class="btnText">
                            <span>每日一题</span>
                        </div>
                    </div>
                </div>
                <div id="btn6" style="margin-top: 30px">
                    <div id="majiang" class="pattern part2">
                        <div class="btnText">
                            <span>斗地主</span>
                        </div>
                    </div>
                </div>
                <div id="btn7" style="margin-top: 30px">
                    <div id="doudizhu" class="pattern part2">
                        <div class="btnText">
                            <span>麻将</span>
                        </div>
                    </div>
                </div>
                <div id="btn8" style="margin-top: 30px">
                    <div id="returnPattern" class="pattern">
                        <div class="btnText">
                            <span>返回</span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>
<script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
<script src="js/addressSelect.js" charset="utf-8"></script>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script type="text/javascript">
    var knapsackUsedAmount=0;
    var inform;
    var caozuo,oo=null,PaySize=0;
    var NoticeNumber=0,NowNoticeNumber=0,yzmBtnType=0;

    var displayStart = 1;
    var endPage = null;
    var layer = layui.layer;
    var form = null, list = null;
    var InPhotoTimer,OutPhotoTimer;
    var eleBack = null, eleFront = null;


    launch();
    funBackOrFront();

    layui.use(['form', 'element'], function() {
        form = layui.form;
        search(1);

        $('.fristPage').click(function() {
            search(1);
            return false;
        });
        $('.lastPage').click(function() {
            search((displayStart > 1 ? displayStart - 1 : 1));
            return false;
        });
        $('.nextPage').click(function() {
            search((displayStart < endPage ? displayStart + 1 : endPage));
            return false;
        });
        $('.endPage').click(function() {
            search(endPage);
            return false;
        })

        form.on('submit', function(data) {
            var data = form.val("data");
            data.userId=sessionStorage.getItem('userId');

            $.ajax({
                url: '/real-name/realName',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function (res) {
                    layer.msg(res.msg);
                    if(res.code===200){
                        $('#verifyUserLayer').css('display','none')
                    }
                }
            })
            return false;
        });


    })

    $('#breakThrough').click(function () {
        location.href = 'breakThrough.html'
    })

    $('#pk').click(function () {
        location.href = 'pvp_mode.html'
    })

    $('#endless').click(function () {
        location.href = 'endless_mode.html'
    })

    $('#closeKnapsack').click(function () {
        $('#carBox').css('display','none');
        $('#knapsack').fadeOut(700);
        $('#storageBox').empty();
    })

    $('#knapsackButton').click(function () {
        knapsackShow();
        $('#knapsack').fadeIn(700);
    })

    $('#SignInButton').click(function () {
        SignInShow();
        $('#SignInDv').fadeIn(700);
    })

    $('#SignIn').click(function () {
        let qqqqq= $('#SignInOrNot').val();
        if (qqqqq==='123'){
            $.ajax({
                url: '/sign-info/signIn',
                method: 'POST',
                contentType: 'application/json',
                data:JSON.stringify({
                    userId:sessionStorage.getItem('userId')
                }),
                success: function () {
                    SignInShow();
                    launch();
                }
            })
        }
        else {
            layer.msg('今日已签到')
        }
    })

    $('#NoticeButton').click(function () {
        NoticeShow()
        $('#Notice').fadeIn(700);
    })

    $('#closeSignIn').click(function () {
        $('#SignInDv').fadeOut(700);
    })

    $('#closeNotice').click(function () {
        $('#Notice').fadeOut(700);
        NowNoticeNumber=0;
    })
    $('#closeStore').click(function () {
        $('#storeContent').fadeOut(700);
        NowNoticeNumber=0;
    })

    $('#storeButton').click(function () {
        $('#storeContent').fadeIn(700)
    })

    $("#morePlay").click(function () {
        overturn();
    })

    $("#returnPattern").click(function() {
        overturn();
    })

    $('#leftButton').click(function () {
        NowNoticeNumber=NowNoticeNumber-1;
        NoticeShow();
    })

    $('#rightButton').click(function () {
        NowNoticeNumber=NowNoticeNumber+1;
        NoticeShow();
    })

    $('#addDiamond').click(function () {
        $.ajax({
            url: '/real-name/toReal/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function(res) {
                if (res.code===200){
                    let VerDv='<div id="verifyUserDv">\n' +
                        '        <form class="layui-form" action="" lay-filter="data">\n' +
                        '            <div style="height: 30px;width: 200px;margin: 30px auto 0;text-align: center">\n' +
                        '                <b style="font-size: 25px">实&nbsp;&nbsp;名&nbsp;&nbsp;认&nbsp;&nbsp;证</b>\n' +
                        '            </div>\n' +
                        '            <div class="layui-form-item" style="margin: 25px 0 0 25px;font-size: 15px">\n' +
                        '                <label class="layui-form-label">真实姓名</label>\n' +
                        '                <div class="layui-input-block">\n' +
                        '                    <input id="userNameInput" type="text" style="width: 200px" name="userName" lay-verify="title" autocomplete="off" placeholder="请输入自己的真实姓名" class="layui-input">\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '\n' +
                        '            <div class="layui-form-item" style="margin: 20px 0 0 25px;font-size: 15px">\n' +
                        '                <label class="layui-form-label">输入身份证</label>\n' +
                        '                <div class="layui-input-block">\n' +
                        '                    <input id="userIdentityInput" type="text" style="width: 200px" name="idCard" lay-verify="identity" placeholder="输入正确的个人身份证号码" autocomplete="off" class="layui-input">\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '\n' +
                        '\n' +
                        '            <div class="layui-form-item" style="margin: 20px 0 0 25px;font-size: 15px">\n' +
                        '                <label class="layui-form-label">绑定邮箱</label>\n' +
                        '                <div class="layui-input-block">\n' +
                        '                    <input id="userEmailInput" type="text" style="width: 200px" name="eMail" lay-verify=”email” autocomplete="off" placeholder="请输入可以使用的邮箱" class="layui-input">\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '\n' +
                        '            <div class="layui-form-item" style="width: 150px;;margin: 20px 0 0 25px;font-size: 15px">\n' +
                        '                <label class="layui-form-label">邮箱验证码</label>\n' +
                        '                <div class="layui-input-block">\n' +
                        '                    <input id="yzmInput" type="text" style="width: 100px" name="code" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">\n' +
                        '                </div>\n' +
                        '                <div id="yzmBtn"><span id="yzmBtnText">发送验证码</span></div>\n' +
                        '            </div>\n' +
                        '\n' +
                        '            <button id="verifySubmit" type="submit" class="layui-btn" lay-submit="">提&nbsp;&nbsp;&nbsp;&nbsp;交</button>\n' +
                        '            <div id="verifyClose">取&nbsp;&nbsp;&nbsp;&nbsp;消</div>\n' +
                        '        </form>\n' +
                        '    </div>'
                    let verifyUserLayer=document.getElementById('verifyUserLayer')
                    verifyUserLayer.innerHTML=VerDv;
                    $('#verifyUserLayer').css('display','block');
                    layer.msg('该账号当前未进行实名认证，请验证后再进行支付')
                }
                else if (res.code===400){
                    $('#PayBigDv').fadeIn(700);
                }
            }
        })
    })
    $('#verifyUserLayer').on("click","#yzmBtn",function(){
        if (yzmBtnType===1){
            layer.msg('请等待倒计时结束才能再次发送');
        }
        else if (yzmBtnType===0){
            $.ajax({
                url: '/real-name/sendEmail/'+$('#userEmailInput').val(),
                method: 'GET',
                contentType: 'application/json',
                success: function (res) {
                    layer.msg(res.msg)
                    if (res.code===200){
                        yzmBtnType=1;
                        TimeDown(60);
                        $('#yzmBtn').css('background','#777').css('cursor','not-allowed')
                    }
                }
            })
        }
    })

    $('#verifyUserLayer').on("click","#verifyClose",function(){
        $('#verifyUserLayer').fadeOut(700);
    })



    $('#userDataUrl').click(function () {
        sessionStorage.setItem('state','1')
        location.href='user_center.html'
    })

    $('#userRecordsUrl').click(function () {
        sessionStorage.setItem('state','2')
        location.href='user_center.html'
    })

    $('#battleRecordUrl').click(function () {
        sessionStorage.setItem('state','3')
        location.href='user_center.html'
    })

    $('#userInformationUrl').click(function () {
        sessionStorage.setItem('state','4')
        location.href='user_center.html'
    })

    $('#cancellation').click(function () {
        sessionStorage.setItem('userId','')
        location.href='login.html'
    })


    $('#ToMyself').click(function () {
        sessionStorage.setItem('state','1')
        location.href='user_center.html'
    })

    $('#addGoldCoin').click(function () {
        $('#exchangeLayer').css('display','block')
    })

    $('#exchangeClose').click(function () {
        $('#exchangeLayer').css('display','none')
    })

    $('#exchangeBtn').click(function () {
        let exchangNumber=$('#exchangeNumber').val()
        let regPos = /^\d+(\.\d+)?$/;
        let regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
        if (exchangNumber===''){
            layer.msg('请输入要兑换的钻石数目')
        }
        else if (regPos.test(exchangNumber) || regNeg.test(exchangNumber)){
            $.ajax({
                url: '/user/exchangePoints',
                method: 'POST',
                contentType: 'application/json',
                data:JSON.stringify({
                    userId:sessionStorage.getItem('userId'),
                    points:exchangNumber*100
                }),
                success: function (res) {
                    layer.msg(res.msg)
                    launch();
                }
            })
        }
        else{
            layer.msg('请输入数字');
        }
    })


    function launch(){
        $.ajax({
            url: '/user/getUserInfoById/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function(res) {
                $('#username').text(res.data.username)
                if (res.data.sex==='男'){$('#username').css('color','blue')}
                else {$('#username').css('color','red')}
                $('#GoldCoinNumber').text(res.data.points)
                $('#DiamondNumber').text(res.data.diamonds)
                $('#userPhoto').attr('src','http://localhost:8088/'+res.data.userImage)

            }
        })

        $.ajax({
            url: '/user/listRecord/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function(res) {
                $('#win').text(res.data.win)
                $('#victory').text(res.data.winningRate+'%')
                $('#lose').text(res.data.fail)
            }
        })

        L2Dwidget.init({
            "model": { "jsonPath":"https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },
            "display": { "position": "right", "width": 200, "height": 200, "hOffset": 0, "vOffset": 0 },
            "mobile": { "show": true, "scale": 0.5 },
            "react": { "opacityDefault":1, "opacityOnHover":0.2 }
        });
    }


    function useProp(){
        let confirm1=layer.confirm('确定使用', {
                btn: ['确定','取消']
            },function () {
                $.ajax({
                    url: '/bag-content/useGoods',
                    method: 'POST',
                    contentType: 'application/json',
                    data:JSON.stringify({
                        userId:sessionStorage.getItem('userId'),
                        goodsId:oo
                    }),
                    success: function (res) {
                        $('#storageBox').empty();
                        knapsackShow();
                        layer.msg(res.msg);
                        launch();
                    }
                })
                layer.close(confirm1);
            }
            ,function(){
                layer.close(confirm1);
            })
    }

    function discard(){
        let confirm2=layer.confirm('确定丢弃', {
                btn: ['确定','取消']
            },function () {
                $.ajax({
                    url: '/bag-content/removeGoods',
                    method: 'POST',
                    contentType: 'application/json',
                    data:JSON.stringify({
                        userId:sessionStorage.getItem('userId'),
                        goodsId:oo
                    }),
                    success: function (res) {
                        $('#storageBox').empty();
                        knapsackShow();
                        layer.msg(res.msg)
                        launch();
                    }
                })
                layer.close(confirm2);
            }
            ,function(){
                layer.close(confirm2);
            })
    }

    function NoticeShow() {
        $.ajax({
            url: '/notice/listOfUser',
            method: 'POST',
            contentType: 'application/json',
            success:function (res) {
                NoticeNumber=res.data.length-1;
                $('#NoticeTitle').text(res.data[NowNoticeNumber].title)
                $('#NoticePicture').attr('src','http://localhost:8088/'+res.data[NowNoticeNumber].noticeImage)
                $('#NoticeWords').text(res.data[NowNoticeNumber].noticeText)
                if (NowNoticeNumber===0){$('#leftButton').css('visibility','hidden')}
                if (NowNoticeNumber>0){$('#leftButton').css('visibility','visible')}
                if (NowNoticeNumber===NoticeNumber){$('#rightButton').css('visibility','hidden')}
                if (NowNoticeNumber<NoticeNumber){$('#rightButton').css('visibility','visible')}
            }
        })
    }

    function knapsackShow() {
        $.ajax({
            url: '/userBag/myBag/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function(res) {
                $('#UsedLattice').text(res.data.usedAmount)
                $('#unusedLattice').text(res.data.totalAmount)
                $('#knapsackName').text(res.data.bagLevel);
                knapsackUsedAmount =res.data.usedAmount;
                let rongliang=res.data.totalAmount;
                for (var p=0;p<rongliang;p++){
                    var $div = $(" <div class=\"lattice\"><img src=\"\" class=\"tp\" alt=\"\"></div>");
                    $('#storageBox').append($div);
                    var id=p;
                    $div.attr('id',id);
                }

                $.ajax({
                    url: '/bag-content/listMyBag/'+sessionStorage.getItem('userId'),
                    method: 'GET',
                    contentType: 'application/json',
                    success:function (res) {
                        for (let longhaijian=0;longhaijian<knapsackUsedAmount;longhaijian++){
                            let idming='#'+longhaijian;
                            $(idming).children("img").attr("src",'http://localhost:8088/'+res.data[longhaijian].goodsImage)
                            $(idming).val(res.data[longhaijian].goodsId)

                        }
                    }
                })

            }
        })
    }




    function SignInShow() {
        $.ajax({
            url: '/sign-info/signInUI/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                $('#signDays').text(res.data.signTimes)
                if (res.code===200){
                    $('#SignInOrNot').text('签  到').val('123')
                }
                else if (res.code===400){
                    $('#SignInOrNot').text('已 签 到').val('321').css('color','white')
                    $('#SignIn').css('background-color','#777').css('cursor','not-allowed')
                }
            }
        })
    }


    function shopping(value) {
        let goodsId=value,
            userId=sessionStorage.getItem('userId');
        let confirm3=layer.confirm('确定购买', {
                btn: ['确定','取消']
            },function () {
                $.ajax({
                    url: '/points-store/exchangeGoods/',
                    method: 'POST',
                    contentType: 'application/json',
                    data:JSON.stringify({
                        goodsId:goodsId,
                        userId:userId,
                    }),
                    success: function(res) {
                        if(res.code===200){
                            layer.msg(res.msg);
                            launch();
                        }else {
                            layer.msg(res.msg);
                            launch();
                        }
                    }
                })

            }
            ,function(){
                layer.close(confirm3);
            })

    }


    $('#knapsack').on("click",".lattice",function(ev){
        oo=$(this).val();
        var mDiv = document.getElementById('carBox');
        if(mDiv){
            document.body.removeChild(mDiv);
        }

        var oEvent=ev||event;
        var oDiv=document.createElement('div');
        oDiv.id = "carBox";
        oDiv.style.backgroundColor ="white";
        oDiv.style.left=(oEvent.clientX+10)+'px';
        oDiv.style.top=(oEvent.clientY-70)+'px';
        oDiv.style.border='1px solid #48cfbd';
        oDiv.style.borderRadius = '10px';
        oDiv.style.zIndex='1000'
        oDiv.style.position='absolute';
        oDiv.style.width='80px';
        oDiv.style.height='80px';
        var content = '<div style="z-index: 1000;float:bottom;width:80px;height: 80px;">'+
            '<div id="useProp" onclick="useProp()" style="background: #3eb5de;\n' +
            '            width: 50px;z-index: 1000;\n' +
            '            height: 20px;\n' +
            '            margin: 10px auto 0;\n' +
            '            border: 1px solid black;\n' +
            '            text-align: center;\n' +
            '            cursor: pointer;">使用</div>'+
            '<div id="discard"  onclick="discard()" style=" background: white;\n' +
            '            width: 50px;z-index: 1000;\n' +
            '            height: 20px;\n' +
            '            margin: 10px auto 0;\n' +
            '            border: 1px solid black;\n' +
            '            text-align: center;\n' +
            '            cursor: pointer;">丢弃</div>'+
            '</div>';
        oDiv.innerHTML = content;
        document.body.appendChild(oDiv);
        caozuo=oDiv;
        caozuo.onclick=function()
        {
            caozuo.style.display="none";
        }
    })


    $('#knapsack').on("mouseenter",".lattice",function(ev){
        var oEvent=ev;
        var latticeId=$(this).val();
        if (latticeId===''){}
        else {
            $.ajax({
                url: '/userBag/goodsInfo/'+latticeId,
                method: 'GET',
                contentType: 'application/json',
                success:function (res) {
                    var mDiv = document.getElementById('djxx');
                    if(mDiv){
                        document.body.removeChild(mDiv);
                    }
                    var oDiv=document.createElement('div');
                    oDiv.id = "djxx";
                    oDiv.style.backgroundColor ="white";
                    oDiv.style.left=(oEvent.clientX-30)+'px';
                    oDiv.style.top=(oEvent.clientY-300)+'px';
                    oDiv.style.border='1px solid #48cfbd';
                    oDiv.style.borderRadius = '10px';
                    oDiv.style.zIndex='1000'
                    oDiv.style.position='absolute';
                    oDiv.style.width='150px';
                    oDiv.style.height='150px';
                    var jj = '<div style="text-align: center;z-index: 1000;float:left;width:150px;height: 80px;">' +
                        '<div style="margin-top: 20px"><b>道具名：</b><b id="djname" style="color: darkorange"></b></div>' +
                        '<div style="margin-top: 20px"><b>类型:</b><b id="leixin" style="color: #009f95"></b></div>' +
                        '<div style="margin-top: 20px"><b>简介:</b><b id="jianjie"></b></div>' +
                        '</div>';
                    oDiv.innerHTML = jj;
                    document.body.appendChild(oDiv);
                    inform=oDiv;
                    $('#djname').text(res.data.goodsName);
                    $('#leixin').text(res.data.goodsType);
                    $('#jianjie').text(res.data.goodsDesc);
                    inform.onclick=function()
                    {
                        inform.style.display="none";
                    }
                }
            })
        }
    })

    $('#knapsack').on("mouseleave",".lattice",function(){
        $('#djxx').css('display','none');
    })

    function search(index) {
        if (!index)
            var index = displayStart;
        var data =form.val('data');
        data.displayStart = index;
        data.displayLength = 4;
        $.ajax({
            url: '' + '/points-store/listOfUser',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (res) {
                num=res.data.total;
                $("#one").html(num);
                $('#box').empty();
                displayStart = res.data.current;
                endPage = res.data.pages;
                list = res.data.records;
                for (var i = 0; i < res.data.records.length; i++) {
                    $('#box').append(
                        '<div id = "num'+i+'" style="top:' +i%10*250+ 'px; border: 1px solid #8D8D8D;width: 740px;height: 130px;margin: 5px auto;">'+
                        '<div style="width: 110px;height: 110px;margin:8px 8px;">'+'<img src="http://localhost:8088/'+res.data.records[i].goodsImage+'" style="height: 110px;width: 110px;">'+'</div>'+
                        '<div id="mc" style="width: 300px;height: 120px;margin: -125px 160px;">'+
                        '<div id="mz" style="width: 300px;height: 30px;margin-top: 15px;font-size: 20px;">'+'名称：'+res.data.records[i].goodsName+'</div>'+
                        '<div id="lx" style="width: 300px;height: 30px;margin-top: 8px;font-size: 18px;">'+'类型：'+res.data.records[i].goodsType+'</div>'+
                        '<div id="jg" style="width: 300px;height: 42px;margin-top: 8px;color: #e02323;font-size: 22px;">'+'¥'+res.data.records[i].price+'</div>'+
                        '</div>'+
                        '<div id="incjs" style="width: 250px;height: 120px;margin-left:400px;  font-size: 18px;">'+'作用：' +res.data.records[i].goodsDesc+'</div>'+
                        '<div id="incjs" style="width: 120px;height: 60px;margin-left:580px; margin-top: -60px; font-size: 18px;">'+'<button style="background-color: #5FB878;width: 120px;height: 50px;  border-radius: 10px;color: white;  border: 0px;" onclick="shopping('+res.data.records[i].id+')">'+'购买'+'</button>' +'</div>'+
                        '</div>'
                    );
                }
                $('#page').html(displayStart)
            }
        })

    }

    function funBackOrFront() {
        $(".list").each(function() {
            if ($(this).hasClass("out")||$(this).hasClass("TheUseless")) {
                eleBack = $(this);
            } else {
                eleFront = $(this);
            }
        });
    }

    function overturn() {
        eleFront.addClass("out").removeClass("in");
        setTimeout(function() {
            eleBack.addClass("in").removeClass("out").removeClass("TheUseless");
            funBackOrFront();
        }, 100);
    }


    $(".informationShow").hover(function(){
            clearTimeout(OutPhotoTimer);
            InPhotoTimer = setTimeout(function(){
                $('#userPhoto').animate({
                    marginTop:'20px',
                    marginLeft:'20px',
                    width:'120px',
                    height:'120px',
                },200)
                $('#myselfInformation').css('zIndex','1')
                $('#myselfInformation').animate({
                    opacity:'1'
                },100);
            },400);
        },
        function(){
            clearTimeout(InPhotoTimer);
            OutPhotoTimer = setTimeout(function () {
                $('#userPhoto').animate({
                    marginTop:'20px',
                    marginLeft:'40px',
                    width:'80px',
                    height:'80px'
                },200)
                $('#myselfInformation').css('zIndex','-1')
                $('#myselfInformation').animate({
                    opacity:'0'
                },100);
            },400);
        })


    $('#payDv').on("click",".paySize",function(){
        $('.paySize').css('border','2px solid #16c9c9').css('color','black')
        $(this).css('border','2px solid red').css('color','red')
        PaySize=$(this).attr('value')
    })


    function nextPay() {
        if (PaySize===0){
            layer.msg('请选择充值档位',{time:1000})
        }
        else {
            $('#payDv').css('width','500px').css('height','450px').css('margin','200px auto 0')
            let payDv=document.getElementById('payDv')
            $('#payDv').empty();
            let NewPayDv='<div id="choicePayWayDv">' +
                '<div id="iPosition" style="float: left;position:absolute;color: black;margin:10px 0 0 20px">' +
                '<i id="i" class="layui-icon layui-icon-return" style="font-size: 3em"></i></div>' +
                '<div id="PayTitleDv"><b>支付</b></div>' +
                '<div id="PayMoneyDv"></div>'+
                '<div id="zfb" class="payImageDv"><img src="../img/支付宝支付.png" class="payImage"></div>' +
                '<div id="wx" class="payImageDv"><img src="../img/微信支付.png" class="payImage"></div>' +
                '<div id="yl" class="payImageDv"><img src="../img/银联支付.png" class="payImage"></div>'
            payDv.innerHTML=NewPayDv
            let PayMoney=document.getElementById('PayMoneyDv');
            PayMoney.innerHTML='<div style="float: left;font-size: 1.2em;color: #8D8D8D;margin-left: 50px"><b>商品：</b><b>'+PaySize+'0钻石</b></div>' +
                '<div style="float: right;color: #f65e5e;font-size: 2.5em;margin:-15px 40px 0 0"><b>￥</b><b id="PayMoney">'+PaySize+'</b><b style="font-size: 0.5em">元</b></div>'
        }
    }

    function ClosePay(){
        $('#PayBigDv').fadeOut(700);
    }


    $('#payDv').on("click","#zfb",function(){
        payDiamond(PaySize)
    })
    $('#payDv').on("click","#wx",function(){
        layer.msg('十分抱歉，暂未与微信合作，无法微信支付')
    })

    $('#payDv').on("click","#yl",function(){
        layer.msg('十分抱歉，暂未与各大银行合作，无法银联支付')
    })

    $('#payDv').on("click","#i",function(){
        PaySize=0;
        $('#payDv').empty();
        let payDv=document.getElementById('payDv')
        $('#payDv').css('width','800px').css('height','550px').css('margin','150px auto 0')
        let OidPayDv= '<div id="paySizeDv" style="width: 800px;height: 450px;">\n' +
            '            <div class="paySize" value="6"><img src="../img/6yuan.png" alt="" style="width: 90px;margin-top: 60px">\n' +
            '                <p>￥6元</p>\n' +
            '            </div>\n' +
            '            <div class="paySize" value="30"><img src="../img/30yuan.png" alt="" style="width: 150px;margin-top: 40px">\n' +
            '                <p>￥30元</p>\n' +
            '            </div>\n' +
            '            <div class="paySize" value="68"><img src="../img/68yuan.png" alt="" style="width: 100px;margin-top: 40px">\n' +
            '                <p>￥68元</p>\n' +
            '            </div>\n' +
            '            <div class="paySize" value="128"><img src="../img/128yuan.png" alt="" style="width: 120px;margin-top: 40px">\n' +
            '                <p>￥128元</p>\n' +
            '            </div>\n' +
            '            <div class="paySize" value="328"><img src="../img/328yuan.png" alt="" style="width: 100px;margin-top: 40px">\n' +
            '                <p>￥328元</p>\n' +
            '            </div>\n' +
            '            <div class="paySize" value="648"><img src="../img/648yuan.png" alt="" style="width: 120px;margin-top: 50px">\n' +
            '                <p>￥648元</p>\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div id="nextPayDv">\n' +
            '            <button id="nextPay" onclick="nextPay()">下一步</button>\n' +
            '        </div>\n' +
            '        <div id="ClosePayDv">\n' +
            '            <button id="ClosePay" onclick="ClosePay()">取消</button>\n' +
            '        </div>'
        payDv.innerHTML=OidPayDv
    })



    function payDiamond(number) {
        let amount=number
        $.ajax({
            url: '/payment/pay',
            method: 'POST',
            contentType: 'application/json',
            data:JSON.stringify({
                userId:sessionStorage.getItem('userId'),
                amount:amount
            }),
            success:function (res) {
                layer.msg('正在跳转到支付页面······'+res.data)
            }
        })
    }

    function TimeDown(time) {
        if (time===0){
            $('#yzmBtn').css('background','#1E9FFF')
            $('#yzmBtnText').text('发送验证码')
        }
        else if (time>0){
            $('#yzmBtnText').text(time+'s').css('color','white')
            time=time-1;
            setTimeout(function () {
                TimeDown(time);
            },1000)
        }
    }

</script>
</html>